<template>
    <div>
        <div class="info" v-loading="loading">
            <div>
                <el-avatar :src="userInfo.avatar" :size="100" style="margin-right: 30px;"></el-avatar>
            </div>
            <div>
                <div class="flex-center">
                    <span class="nickname">{{ userInfo.nickname }}</span>
                    <el-tag size="small" type="info">{{ userInfo.role == '1' ? '普通用户' : (userInfo.role == '2' ? '讲师' : '')
                    }}</el-tag>
                </div>
                <div class="introduce">个人签名：{{ userInfo.introduce }}</div>
            </div>
        </div>
        <div class="content">
            <div class="nav">
                <ul>
                    <li class="nav-item" @click="toPage(1, '/user/space/course')" :class="[active == 1 ? 'active' : '']">
                        <span>
                            <i></i>
                            <span>课程学习</span>
                        </span>
                    </li>
                    <li class="nav-item" @click="toPage(2, '/user/space/collect')" :class="[active == 2 ? 'active' : '']">
                        <span>
                            <i></i>
                            <span>我的收藏</span>
                        </span>
                    </li>
                    <li class="nav-item" @click="toPage(3, '/user/space/notebook')" :class="[active == 3 ? 'active' : '']">
                        <span>
                            <i></i>
                            <span>我的笔记</span>
                        </span>
                    </li>
                    <li class="nav-item" @click="toPage(4, '/user/space/question')" :class="[active == 4 ? 'active' : '']">
                        <span>
                            <i></i>
                            <span>我的问答</span>
                        </span>
                    </li>
                    <li class="nav-item" @click="toPage(5, '/user/space/manage')" :class="[active == 5 ? 'active' : '']"
                        v-if="userInfo.role == '2'">
                        <span>
                            <i></i>
                            <span>课程管理</span>
                        </span>
                    </li>
                    <li class="nav-item" @click="toPage(6, '/user/space/order')" :class="[active == 6 ? 'active' : '']">
                        <span>
                            <i></i>
                            <span>我的订单</span>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="detail">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import { reqUserMeInfo } from "@/api/user"
export default {
    name: 'user',
    data() {
        return {
            active: 1,
            userInfo: {},
            loading: false
        }
    },
    mounted() {
        this.getIdx(this.$route.path);
        this.getMeInfo();
    },
    methods: {
        getIdx(url) {
            if (url == "/user/space") this.toPage(1, "/user/space/course");
            else if (url == "/user/space/course") this.active = 1;
            else if (url == "/user/space/collect") this.active = 2;
            else if (url == "/user/space/notebook") this.active = 3;
            else if (url == "/user/space/question") this.active = 4;
            else if (url == "/user/space/manage") this.active = 5;
            else if (url == "/user/space/order") this.active = 6;
        },
        getMeInfo() {
            reqUserMeInfo().then((res) => {
                this.userInfo = res.data;
                this.loading = false
            }).catch((error) => {
                this.loading = false
                this.$message.error(error.message)
            })
        },
        toPage(idx, url) {
            this.active = idx;
            this.$router.push(url)
        }
    },
    watch: {
        $route(to, from) {
            this.getIdx(to.path);
        }
    }

}
</script>

<style scoped>
.info {
    display: flex;
    align-items: center;
}

.content {
    display: flex;
    margin-top: 20px;
}

.nav ul {
    list-style: none;
    padding-left: 0;
}

.detail {
    flex: 1;
    margin-left: 40px;
}

.nav-item {
    cursor: pointer;
    height: 48px;
    text-align: center;
    line-height: 48px;
    width: 160px;
    margin: 0 auto 8px;
    position: relative;
    display: block;
    font-size: 16px;
}

.active {
    color: #fff;
    background: rgba(240, 20, 20, .8);
    border-radius: 8px 0 0 8px;
}

.active:after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 24px solid #f8fafc;
    border-bottom: 24px solid #f8fafc;
    border-left: 15px solid transparent;
}

.nickname {
    font-size: 24px;
    font-weight: 600;
    margin-right: 10px;
}

.flex-center {
    display: flex;
    align-items: center;
}

.introduce {
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 14px;
    color: rgb(66, 65, 65);
}
</style>